<!--产品标准产能：详情-->
<template>
  <div>
    <el-dialog
      top="3vh"
      width="85%"
      title="详情"
      append-to-body
      custom-class="productStandardCapacityDetailDialog"
      v-if="showDetailDialog"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="showDetailDialog"
      @close="handleDetailReset"
    >
      <div class="detailArea" v-loading="detailDialog.loading">
        <div class="dispatch-title">
          <div class="dispatch-title-dot"></div>
          <div class="dispatch-title-text">产品信息</div>
        </div>
        <avue-form ref="detailRef" v-model="detailDialog.form" :option="detailDialog.option"> </avue-form>
        <div class="dispatch-title">
          <div class="dispatch-title-dot"></div>
          <div class="dispatch-title-text">产能设置</div>
        </div>
        <avue-crud ref="detailCrud" v-model="detailDialog.tableForm" :option="detailDialog.tableOption" :data="detailDialog.tableData"> </avue-crud>
        <div class="dispatch-title">
          <div class="dispatch-title-dot"></div>
          <div class="dispatch-title-text">操作记录</div>
        </div>
        <avue-crud ref="detailCrud" :option="detailDialog.operateOption" :data="detailDialog.operateData">
          <template slot="menu" slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-view" @click="handleDetail(scope.row, scope.index)"> 查看 </el-button>
          </template>
        </avue-crud>
      </div>
    </el-dialog>
    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </div>
</template>

<script>
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import { getDetail, getLogDetail } from '@/api/product/productStandardCapacity';
export default {
  name: 'ProductStandardCapacityDetail',
  components: {
    GlobalModalTemplate
  },
  props: {
    showDetailDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rowId: null,
      detailDialog: {
        form: {},
        loading: false,
        option: {
          searchShow: true,
          searchMenuSpan: 6,
          menuPosition: 'right',
          submitBtn: false,
          emptyBtn: false,
          detail: true,
          labelWidth: 100,
          column: [
            {
              label: '产品编码',
              prop: 'productPartNo',
              disabled: true,
              span: 12
            },
            {
              label: '产品名称',
              prop: 'productPartName',
              disabled: true,
              span: 12
            },
            {
              label: '产品型号',
              prop: 'productPartModel',
              disabled: true,
              span: 12
            },
            {
              label: '产品类型',
              prop: 'productPartType',
              search: true,
              type: 'select',
              disabled: true,
              span: 12,
              dicUrl: '/api/blade-system/dict/dictionary?code=part_type',
              props: {
                label: 'dictValue',
                value: 'dictKey'
              }
            }
          ]
        },
        tableOption: {
          height: '200px',
          calcHeight: 30,
          tip: false,
          searchShow: false,
          border: true,
          index: true,
          indexLabel: '序号',
          viewBtn: false,
          editBtn: true,
          addBtn: false,
          delBtn: false,
          cellBtn: true,
          labelWidth: 130,
          selection: false,
          refreshBtn: false,
          columnBtn: false,
          highlightCurrentRow: true, // 选中高亮
          dialogClickModal: false,
          menu: false,
          column: [
            {
              label: '工段名称',
              prop: 'sectionName'
            },
            {
              label: '产线名称',
              prop: 'lineName'
            },
            {
              label: 'UPH',
              width: 150,
              prop: 'uph'
            },
            {
              label: '开线时长（分）',
              prop: 'openLineDuration'
            },
            {
              label: '清线时长（分）',
              prop: 'clearLineDuration'
            },
            {
              label: '制定人',
              prop: 'createUserName'
            },
            {
              label: '创建时间',
              prop: 'createTime'
            }
          ]
        },
        operateOption: {
          height: '200px',
          calcHeight: 30,
          tip: false,
          searchShow: false,
          border: true,
          index: true,
          indexLabel: '序号',
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          labelWidth: 130,
          selection: false,
          refreshBtn: false,
          columnBtn: false,
          highlightCurrentRow: true, // 选中高亮
          dialogClickModal: false,
          menu: true,
          column: [
            {
              label: '操作时间',
              prop: 'createTime'
            },
            {
              label: '操作人',
              prop: 'createUserName'
            }
          ]
        }, //操作记录
        operateData: [], //操作记录
        tableData: [],
        rowIndex: -1,
        tableForm: {}
      },
      form: {},
      query: {},
      loading: true,
      data: [],
      visibile: false,
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      timer: new Date().getTime() //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
    };
  },
  methods: {
    getData(row) {
      this.detailDialog.form.productPartNo = row.productPartNo;
      this.detailDialog.form.productPartName = row.productPartName;
      this.detailDialog.form.productPartModel = row.productPartModel;
      this.detailDialog.form.productPartType = row.productPartType;
      this.detailDialog.form.productPartId = row.productPartId;
      if (row.id) {
        this.detailDialog.loading = true;
        getDetail(row.id)
          .then((res) => {
            let data = res.data.data;
            this.detailDialog.tableData = structuredClone(data.standardCapacityDetailList);
          })
          .finally(() => {
            this.detailDialog.loading = false;
          });
      }
      if (row.productPartId) {
        this.getLogData(row.productPartId);
      }
    },
    // 获取详情 日志信息
    getLogData(productId) {
      getLogDetail(productId)
        .then((res) => {
          let data = res.data.data;
          this.detailDialog.operateData = data;
        })
        .catch((err) => {});
    },
    handleDetail(row) {
      this.detailDialog.loading = true;
      getDetail(row.id)
        .then((res) => {
          let data = res.data.data;
          this.detailDialog.form.productPartNo = data.productPartNo;
          this.detailDialog.form.productPartName = data.productPartName;
          this.detailDialog.form.productPartModel = data.productPartModel;
          this.detailDialog.form.productPartType = data.productPartType;
          this.detailDialog.form.productPartId = data.productPartId;
          this.detailDialog.tableData = structuredClone(data.standardCapacityDetailList || []);
        })
        .finally(() => {
          this.detailDialog.loading = false;
        });
    },
    openUserCommonModal(params) {
      let { type } = params;
      this.visibile = true;
      this.tableOption = {
        modalTitle: '选择产品信息（双击进行选择）',
        rowSelectionType: 'single',
        menu: false,
        editBtn: false,
        menuWidth: 100,
        searchLabelWidth: 90
      };
      this.tableOption.url = '/api/mes-admin/part-master/page';
      this.tableOption.isPage = true;
      this.tableOption.query = { semifinished: true };
      this.tableOption.templateName = 'NOWORKPARTMASTER';
      switch (type) {
        case 'productCode':
          this.modalName = 'partmasterModal';
          break;
        case 'editProductCode':
          this.modalName = 'editPartmasterModal';
          break;
        case 'replaceProductCode':
          this.modalName = 'replacePartmasterModal';
          break;
        default:
          break;
      }
    },
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'partmasterModal':
          this.importDialog.form.partNo = this._get(rowData, 'partNo', '');
          this.importDialog.form.partName = this._get(rowData, 'name', '');
          break;
        case 'editPartmasterModal':
          let findIndex = this.editDialog.tableData.findIndex((d) => d.$index == this.editDialog.rowIndex);
          this.editDialog.tableData[findIndex].partNo = this._get(rowData, 'partNo', '');
          this.editDialog.tableData[findIndex].partModel = this._get(rowData, 'partModel', '');
          break;

        default:
          break;
      }
    },
    handleDetailReset() {
      this.showDetailDialog = false;
      this.$emit('closeDetailDialog');
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .productStandardCapacityDetailDialog {
  .el-dialog__body {
    padding: 0 20px 20px;
  }
  .avue-form__menu--right {
    display: none;
  }
  .dispatch-title {
    display: flex;
    align-items: center;
    margin: 20px 0;
    &-dot {
      background-color: rgb(102, 177, 255);
      width: 10px;
      height: 20px;
      margin-right: 8px;
    }
    &-text {
      font-weight: bold;
      font-size: 16px;
    }
  }
  .detailTitle {
    font-size: 16px;
    font-weight: bold;
    height: 20px;
    padding: 10px 0;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    .dot {
      background-color: #66b1ff;
      width: 10px;
      height: 20px;
      margin-right: 8px;
    }
    .title {
      height: 20px;
      margin-bottom: 0;
    }
  }
  .detailArea {
    .avue-crud__menu {
      display: none;
    }
  }
}
::v-deep .replaceMateriaDialog {
  .row {
    display: flex;
    .deleteIcon {
      margin-left: 10px;
    }
  }
  .addIcon {
    display: flex;
    justify-content: center;
  }
  .avue-crud__menu {
    display: none;
  }
}
</style>
